<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>超市</title>
    <link rel="stylesheet" href="__PUBLIC__/jd/mui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/jd/iconfont.css" />
    <link rel="stylesheet" href="__PUBLIC__/jd/app.css"/>
    <style>
        .shopping-tab{
            position: fixed;
            top: 44px;
            width: 100%;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .control-item{
            line-height: 38px;
            display: table-cell;
            overflow: hidden;
            width: 1%;
            -webkit-transition: background-color .1s linear;
            transition: background-color .1s linear;
            text-align: center;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #007aff;
            border-color: #007aff;
            border-left: 1px solid #007aff;
        }
        .control-item-active{

        }
        .title-val{
            color: #e75349;
            text-align: center;
            font-size: 14px!important;
        }
        .title{
            text-align: center;
        }
        .shopping-body-titile div{
            color: #000;
            font-size: 18px;
        }
        .shopping-body-titile p span{
            font-size: 18px;
            color: #2b9aec;
        }
        .button{
            line-height: 1;
            background: #2b9aec;
            border: 1px solid #2b9aec;
        }
        .mui-badge{
            border-radius: 5px;
            color: #6dc7a4;
            background: #f3f6ff;
        }
        .control-item-active {
            color: #ffffff!important;
            background-color: #f15e70;
            border-left: #f15e70;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">产品超市</h1>
</header>
<div class="mui-content">
    <div class="shopping-tab">
        <div id="cate" class="mui-segmented-control shopping-control">

        </div>

    </div>
    <script id='cate_template' type="text/template">
        <%for(var i=0;i < cateList.length;i++){%>
        <a class="control-item shopping-item" id="cate_id_<%=cateList[i]['id']%>" onclick="getProductData(<%=cateList[i]['id']%>, 1)">
            <%=cateList[i]['cate_name']%>
        </a>
        <%}%>
    </script>
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top: 85px;bottom: 50px;">
        <div class="mui-scroll">
            <div id="pro">

            </div>
        </div>
    </div>
    <script id='pro_template' type="text/template">
        <%for(var i=0;i < proList.length;i++){%>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;" class="pro_list">
                    <div class="shopping-img">
                        <img class="mui-media-object mui-pull-left" src="<%=proList[i]['pro_pic_url']%>">
                    </div>
                    <div class="mui-media-body">
                        <div class="shopping-body-titile">
                            <div><%=proList[i]['pro_name']%></div>
                            <p>已申请：<span><%=proList[i]['lenders_number']%></span></p>
                        </div>
                        <div class="shouping-money">
                            <div>
                                <p class="title-val"><%=proList[i]['loan_amount']%>元</p>
                                <p class="title">可贷金额</p>
                            </div>
                            <div>
                                <p class="title-val"><%=proList[i]['monthly_interest_rate']%>%</p>
                                <p class="title">月利率</p>
                            </div>
                            <div>
                                <p class="title-val"><%=proList[i]['lending_time']%></p>
                                <p class="title">放款时间</p>
                            </div>
                        </div>
                        <div class="shopping-msg">
                            <p>
                                <span class="mui-badge"><%=proList[i]['prompt_msg']%></span>
                            </p>
                        </div>
                        <div class="shopping-msg">
                            <p>&nbsp;</p>
                            <p>
                                <button type="button" class="mui-btn mui-btn-primary button submit" data-id="<%=proList[i]['id']%>" data-href="<%=proList[i]['pro_link']%>">立即申请</button>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <%}%>
    </script>
</div>
<nav class="mui-bar mui-bar-tab">
    <a class="tab-item" onclick="pageJump('/index/index/home.html', false)">
        <div class="iconfont icon-zhuye"></div>
        <span class="mui-tab-label">主页</span>
    </a>
    <a class="tab-item mui-active">
        <div class="iconfont icon-zhuyecanting"></div>
        <span class="mui-tab-label">产品超市</span>
    </a>
    <a class="tab-item" onclick="pageJump('/index/index/personal.html', false)">
        <div class="iconfont icon-user"></div>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>
<script src="__PUBLIC__/jd/jquery.min.js"></script>
<!-- 皮肤 start -->
<script>
    //顶部
    $('.mui-bar').css('backgroundColor', "#f15e70");
    $('.mui-title').css('color', "#ffffff");
    $('.shopping-control').css('border','1px solid #f15e70');
    // 底部
    $('.mui-bar-tab').css('backgroundColor', "#f15e70");
    $('.mui-bar-tab .tab-item').css('color', "#ffffff");
    $('.mui-bar-tab .tab-item.mui-active').css({'backgroundColor':"#ffffff",'color':"#f15e70"});
</script>
<!-- 皮肤 end -->
<script src="__PUBLIC__/jd/mui.min.js"></script>
<script src="__PUBLIC__/jd/baiduTemplate.js"></script>
<script src="__PUBLIC__/jd/public.js"></script>
<script type="text/javascript">
    var page = 1, count = 0, cateId, isLoading = 1;
    //mui初始化
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    //获取分类数据
    // $.get('/index/index/getCateData',function(data){
    //     var cateData = {"cateList": JSON.parse(data)};
        var cateData ={"cateList": [
                {
                    "id": 1,
                    "pic_url": "http://wangdai.touch-game.cn/public/uploads/20180502/a25063f4131cd902c7e58b3402cf09fe.png",
                    "cate_name": "新品上线"
                },
                {
                    "id": 2,
                    "pic_url": "http://wangdai.touch-game.cn/public/uploads/20180502/3ab739c618dfde6d531ae1bd8bc06e23.png",
                    "cate_name": "高通过率"
                },
                {
                    "id": 3,
                    "pic_url": "http://wangdai.touch-game.cn/public/uploads/20180502/03ee83a5d0f428b036480bc28d46916b.png",
                    "cate_name": "大额产品"
                }
            ]};
        var cateHtml = baidu.template('cate_template', cateData);
        $('#cate').html(cateHtml);
        cateId = GetQueryString('cate_id');
        $('.control-item').removeClass('control-item-active');
        $('#cate_id_'+ cateId).addClass('control-item-active');
        <!-- 皮肤 start -->
        $('.mui-segmented-control .shopping-item').css({'color':"#f15e70",'border-left':'1px solid #f15e70'});
        <!-- 皮肤 end -->
        getProductData(cateId, 0);
    // });

    //数据切换
    function getProductData(cate_Id, tab){
        if(tab == 1){
            page = 1,isLoading = 1,cateId = cate_Id;
            $('#pro').html("");
            mui('#pullrefresh').pullRefresh().refresh(true);
            mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0);
            $('.control-item').removeClass('control-item-active');
            $('#cate_id_'+ cate_Id).addClass('control-item-active');
        }
        $.get('/api/Jd/getcateproductdata',{"cate_id": cate_Id,"page": page},function(data){
            var jsonp = data.data;
            if(jsonp['count'] == 0){
                isLoading = 0;
                count = 1, page = 1;
                return false;
            }
            if(jsonp['count'] <= 6){
                isLoading = 0;
                console.log(isLoading)
                count = 1, page = 1;
            }

            var proData = {"proList": jsonp["dataList"]};

            var proHtml = baidu.template('pro_template', proData);
            $('#pro').append(proHtml);
            $('.title-val, .shopping-body-titile p span, .mui-badge').css('color', "#f15e70");
            $('.button').css({'color':"#ffffff",'backgroundColor': '#f15e70','border': '1px solid #f15e70'});
            count = jsonp["count"];
            page++;
        });
    }

    //mui点击
    mui("#pullrefresh").on("tap",".submit",function(){
        var href = this.getAttribute("data-href");
        var id = this.getAttribute("data-id");
        var isUser = localStorage.getItem("user");
        if(!isUser){
            mui.toast("您还没登录，请登录");
            setTimeout(function(){
                window.location.href = "/index/apply/login.html";
            }, 2000);
            return;
        } else {
            $('.submit').attr("disabled",true);
            $.post('/index/user/setApply', {"user_id": JSON.parse(isUser)["id"],"pro_id": id},function(res){
                $('.submit').attr("disabled",false);
                if(JSON.parse(res)["valid"] == 1){
                    window.location.href = href;
                }
            });
        }
    });

    //上拉加载具体业务实现
    function pullupRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(page * 6 >= count);
            if(isLoading == 1){
                getProductData(cateId, page);
            }
        }, 600);
    }

    //页面跳转
    function pageJump(url, cate_id){
        if(cate_id){
            window.location.href = url+'?cate_id=' + localStorage.getItem("cate_id");
        } else {
            window.location.href = url;
        }
    }
</script>
</body>
</html>